<template>
    <van-swipe-cell :right-width="button.length * 65" @autoOpen="open">
        <van-cell
            inset
            :title="title"
            :label="label"
            class="cell-group"
            is-link
        >
            <slot></slot>
        </van-cell>

        <van-button
            slot="right"
            class="btn"
            :type="btn.type"
            v-for="(btn, index) in button"
            :key="title"
            @click="onClick(index)"
            >{{ btn.name }}
        </van-button>
    </van-swipe-cell>
</template>

<script>
let temp;
export default {
    props: {
        button: {
            type: Array,
        },
        title: {
            type: String,
        },
        label: {
            type: String,
        },
    },
    methods: {
        open({ detail: { position, instance, isClosed } }) {
            if (temp) temp.close();

            if (position === "cell") {
                console.log(position, instance, isClosed);
                setTimeout(() => instance.open(), 300);
                temp = instance;
            }
        },
        onClick(btnIndex) {
            this.$emit("click", this.button[btnIndex]);
        },
    },
};
</script>

<style lang="less" scoped>
.btn /deep/ button {
    height: 100%;
}
</style>